<template>
  <div class="tabbar">
    <van-tabbar z-index="10" v-model="active" active-color="#333" inactive-color="#aaa">
      <van-tabbar-item v-for="(item,index) in icon" :key="index" :to="item.to">
        <span>{{item.name}}</span>
        <template #icon="props">
          <i
            class="iconfont icon-size"
            :class="props.active ? icon[index].active : icon[index].inactive"
            slot="left"
          ></i>
        </template>
      </van-tabbar-item>
    </van-tabbar>
  </div>
</template>

<script>
import Vue from "vue";
import { Tabbar, TabbarItem, Icon } from "vant";

Vue.use(Tabbar)
  .use(TabbarItem)
  .use(Icon);
export default {
  name: "tabbar",
  props: {
  },
  mounted() {
  },
  watch: {
    
  },
  computed: {
    // active() {
    //   return this.$store.getters.action
    // }
    active: {
      get() {
        return this.$store.getters.action;
      },
      set() {
        
      }
    }
  },
  data() {
    return {
      icon: [
        {
          name: "首页",
          active: "icon-home-filling",
          inactive: "icon-home",
          to: "/home"
        },
        {
          name: "点单",
          active: "icon-xiaoshi1",
          inactive: "icon-xiaoshi",
          to: "/commodity"
        },
        // {
        //   name: "百货",
        //   active: "icon-shopping-fill",
        //   inactive: "icon-shopping",
        //   to: "/store"
        // },
        {
          name: "订单",
          active: "icon-order-fill",
          inactive: "icon-dingdan",
          to: "/order"
        },
        {
          name: "我的",
          active: "icon-wode1",
          inactive: "icon-wode",
          to: "/me"
        }
      ]
    };
  }
};
</script>

<style scoped>
.tabbar span {
  font-size: 11px;
}
::v-deep .van-tabbar-item__icon {
  margin-bottom: 0.03333rem;
}
.van-tabbar {
  height: 1.4rem;
  background-color: #f7f7f7;
}
.icon-size {
  font-size: 24px;
}
</style>